<template>
  <div
    v-if="isShowWarning"
    class="today-waring-container"
    :style="single ? 'top: 17%; left: 35.5%' : 'top: 19%; left: 42%'"
    @click.stop
  >
    <div class="today-waring-title">
      <div>侵入管制空域报警数量</div>
      <div>{{ warning.intrusionNum }}</div>
    </div>
    <div class="today-waring-line"></div>
    <div class="today-waring-title">
      <div>偏离航线空域报警数量</div>
      <div>{{ warning.invasionNum }}</div>
    </div>
    <div class="today-waring-line"></div>
    <div class="today-waring-title">
      <div>冲突报警数量</div>
      <div>{{ warning.collisionNum }}</div>
    </div>
    <div class="today-waring-line"></div>
    <div class="today-waring-title">
      <div>黑飞报警数量</div>
      <div>{{ warning.blankFlyNum }}</div>
    </div>
    <div class="today-waring-line"></div>
    <div class="today-waring-title">
      <div>一键报警数量</div>
      <div>{{ warning.OneTouchNum }}</div>
    </div>
  </div>
</template>
<script setup>
import useToolTabStore from "@/store/modules/toolTab";
import useCockpitStore from "@/store/modules/cockpit";
import { computed } from "vue";

const props = defineProps({
  single: {
    type: Boolean,
    default: false,
  },
});

const toolTab = useToolTabStore();
const cockpitStore = useCockpitStore();

const warning = computed(() => {
  return cockpitStore.todayWarning || {};
});

const isShowWarning = computed(() => {
  return toolTab.isTodatWaring;
});
</script>
<style lang="scss" scoped>
.today-waring-container {
  position: absolute;
  z-index: 100;
  width: 280px;
  height: auto;
  padding: 19px 30px 24px 30px;
  border-radius: 7px;
  top: 17%;
  left: 35%;
  background-color: rgba(9, 27, 35, 0.8);
  //top: 200px;
  //left: 200px;
  border: 1px rgba(255, 255, 255, 0.6) solid;
  animation: rotate 3s linear infinite;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  .today-waring-title {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    color: #00fcff;
    div:nth-child(1) {
      font-family: PingFang SC;
    }
    div:nth-child(2) {
      font-family: DigifaceWide;
    }
  }
  .today-waring-line {
    width: 100%;
    height: 1px;
    border: 1px #f2f2f2 dashed;
    opacity: 0.2;
    margin: 16px 0 12px;
  }
}

@keyframes rotate {
  0% {
    border: 1px rgba(255, 255, 255, 0.4) solid;
  }
  50% {
    border: 1px #ffffff solid;
  }
  100% {
    border: 1px rgba(255, 255, 255, 0.4) solid;
  }
}
</style>
